<!-- partial:index.partial.html -->
<dialog id="confirm-modal" class="modal">
	<div class="modal-content">
		<svg
			t="1574164208713"
			class="model-icon"
			viewBox="0 0 1024 1024"
			version="1.1"
			xmlns="http://www.w3.org/2000/svg"
			p-id="5819"
			width="63"
			height="63"
		>
			<path
				d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0zM512 877.714286c-40.228571 0-73.142857-32.914286-73.142857-73.142857s32.914286-73.142857 73.142857-73.142857 73.142857 32.914286 73.142857 73.142857S552.228571 877.714286 512 877.714286zM585.142857 512c0 40.228571-32.914286 73.142857-73.142857 73.142857s-73.142857-32.914286-73.142857-73.142857L438.857143 219.428571c0-40.228571 32.914286-73.142857 73.142857-73.142857s73.142857 32.914286 73.142857 73.142857L585.142857 512z"
				p-id="5820"
				fill="white"
			/>
		</svg>
		<h2 class="modal-title">Are you sure?</h2>
		<p class="modal-description">You can't undo this action.</p>
		<div class="modal-options">
			<button
				class="btn btn-round btn-fill btn-fill-left option confirm"
				data-text="Yes"
				onclick="document.querySelector('#confirm-modal').close()"
			/>
			<button
				class="btn btn-round btn-fill btn-fill-right option cancel"
				data-text="No"
				onclick="document.querySelector('#confirm-modal').close()"
			/>
		</div>
	</div>
</dialog>
<form action="javascript:void(0);">
	<button class="btn btn-danger" onclick="document.querySelector('#confirm-modal').showModal()">
		Delete history
	</button>
</form>
<!-- partial -->

<style>
	@import url(https://fonts.googleapis.com/css?family=Lato);
	:root {
		--primary-color: hsl(171, 100%, 41%);
		--success-color: hsl(141, 53%, 53%);
		--danger-color: hsl(348, 86%, 61%);
	}

	.btn {
		position: relative;
		padding: 0.375rem 0.75rem;
		font-size: 1rem;
		line-height: 1.5;
		color: #212121;
		text-decoration: none;
		background-color: white;
		border: transparent;
		border-radius: 3px;
		outline: transparent;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		white-space: nowrap;
		-webkit-transition: 0.25s;
		transition: 0.25s;
	}
	.btn-danger {
		color: white;
		background-color: var(--danger-color);
	}
	.btn-danger:hover {
		background-color: #ee2049;
	}
	.btn-round {
		border-radius: 30px;
	}
	.btn-fill {
		overflow: hidden;
	}
	.btn-fill-left::before {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	.btn-fill-right::before {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	.btn-fill::before {
		position: absolute;
		content: '';
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		-webkit-transition: 0.4s cubic-bezier(0.75, 0, 0.25, 1);
		transition: 0.4s cubic-bezier(0.75, 0, 0.25, 1);
	}
	.btn-fill::after {
		position: relative;
		content: attr(data-text);
		-webkit-transition: 0.4s ease;
		transition: 0.4s ease;
	}
	.btn-fill:hover::before {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	.btn-fill:hover::after {
		color: white !important;
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 999;
		color: white;
		background-image: -webkit-gradient(linear, left top, right top, from(#0acffe), to(#495aff));
		background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
		border: transparent;
		border-radius: 12px;
		box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028),
			0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042),
			0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07);
		-webkit-animation: show-modal 0.5s ease forwards;
		animation: show-modal 0.5s ease forwards;
	}
	.modal::-webkit-backdrop {
		background: rgba(0, 0, 0, 0.4);
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
	}
	.modal::backdrop {
		background: rgba(0, 0, 0, 0.4);
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
	}
	.modal .model-icon {
		margin-bottom: 1.25rem;
		opacity: 0;
		-webkit-animation: show-modal-icon 0.5s ease 0.2s forwards;
		animation: show-modal-icon 0.5s ease 0.2s forwards;
	}
	.modal .modal-content {
		display: -webkit-box;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		flex-direction: column;
		-webkit-box-align: center;
		align-items: center;
		width: 300px;
		padding: 1em;
	}
	.modal .modal-content .modal-title {
		margin-top: 0;
		margin-bottom: 1.2rem;
		opacity: 0;
		-webkit-animation: show-modal-text 0.5s ease 0.35s forwards;
		animation: show-modal-text 0.5s ease 0.35s forwards;
	}
	.modal .modal-content .modal-description {
		margin: 0;
		opacity: 0;
		-webkit-animation: show-modal-text 1s ease 0.5s forwards;
		animation: show-modal-text 1s ease 0.5s forwards;
	}
	.modal .modal-content .modal-options {
		margin-top: 1rem;
		display: -webkit-box;
		display: flex;
		justify-content: space-around;
	}
	.modal .modal-content .modal-options .option {
		padding: 0 2em;
		margin: 0.3em;
		font-size: 20px;
		font-weight: 700;
		line-height: 2;
	}
	.modal .modal-content .modal-options .confirm {
		opacity: 0;
		-webkit-animation: show-modal-option 0.5s ease 0.65s forwards;
		animation: show-modal-option 0.5s ease 0.65s forwards;
	}
	.modal .modal-content .modal-options .confirm::before {
		background: var(--success-color);
	}
	.modal .modal-content .modal-options .confirm::after {
		color: var(--success-color);
	}
	.modal .modal-content .modal-options .cancel {
		opacity: 0;
		-webkit-animation: show-modal-option 0.5s ease 0.8s forwards;
		animation: show-modal-option 0.5s ease 0.8s forwards;
	}
	.modal .modal-content .modal-options .cancel::before {
		background: var(--danger-color);
	}
	.modal .modal-content .modal-options .cancel::after {
		color: var(--danger-color);
	}

	@-webkit-keyframes show-modal {
		from {
			-webkit-transform: scale(0.8);
			transform: scale(0.8);
		}
		50% {
			-webkit-transform: scale(1.1);
			transform: scale(1.1);
			opacity: 1;
		}
		to {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes show-modal {
		from {
			-webkit-transform: scale(0.8);
			transform: scale(0.8);
		}
		50% {
			-webkit-transform: scale(1.1);
			transform: scale(1.1);
			opacity: 1;
		}
		to {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}
	}
	@-webkit-keyframes show-modal-icon {
		from {
			-webkit-transform: scale(0.4);
			transform: scale(0.4);
		}
		50% {
			-webkit-transform: scale(1.2);
			transform: scale(1.2);
			opacity: 1;
		}
		to {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}
	}
	@keyframes show-modal-icon {
		from {
			-webkit-transform: scale(0.4);
			transform: scale(0.4);
		}
		50% {
			-webkit-transform: scale(1.2);
			transform: scale(1.2);
			opacity: 1;
		}
		to {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}
	}
	@-webkit-keyframes show-modal-text {
		from {
			-webkit-transform: scale(0.6);
			transform: scale(0.6);
		}
		50% {
			-webkit-transform: scale(1.2);
			transform: scale(1.2);
			opacity: 1;
		}
		to {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}
	}
	@keyframes show-modal-text {
		from {
			-webkit-transform: scale(0.6);
			transform: scale(0.6);
		}
		50% {
			-webkit-transform: scale(1.2);
			transform: scale(1.2);
			opacity: 1;
		}
		to {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}
	}
	@-webkit-keyframes show-modal-option {
		from {
			-webkit-transform: scale(0.4);
			transform: scale(0.4);
		}
		50% {
			-webkit-transform: scale(1.2);
			transform: scale(1.2);
			opacity: 1;
		}
		to {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}
	}
	@keyframes show-modal-option {
		from {
			-webkit-transform: scale(0.4);
			transform: scale(0.4);
		}
		50% {
			-webkit-transform: scale(1.2);
			transform: scale(1.2);
			opacity: 1;
		}
		to {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}
	}
</style>
